<template>
  <div class="orderdetails">
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      @click-left="back"
      fixed
    ></van-nav-bar>

    <div class="product" v-show="show">
      <div class="product-title"></div>
      <div class="products">
        <div class="tab-item">
          <div class="clearfix tab-item-box">
            <div class="fl no">{{ product.oid }}</div>
            <div class="fr">
              <div
                class="text"
                v-if="product.status === 1"
                @click="sure(product.oid)"
              >
                确认收货
              </div>
              <div class="text-box-tab" v-else>
                <div class="finished">已完成</div>
                <div class="remove" @click="dele(product.oid)">×</div>
              </div>
            </div>
          </div>

          <div class="order-box">
            <div>
              <div
                class="clearfix cell-box"
                v-for="(item, index) in product.products"
                :key="index"
                @click="go(item)"
              >
                <div class="fl pro-img">
                  <img class="aotu-img" :src="item.smallImg" />
                </div>
                <div class="fl pro-info">
                  <div class="text-box">
                    <div class="clearfix">
                      <div class="fl text-name">{{ item.name }}</div>
                      <div class="fl text-rule">{{ item.rule }}</div>
                    </div>
                    <div class="text-enname">{{ item.enname }}</div>
                  </div>

                  <div class="price-box">
                    <div class="clearfix">
                      <div class="fl text-price">
                        <div class="price">￥{{ item.price }}</div>
                      </div>
                      <div class="fr text-num">
                        <div class="num">×{{ item.count }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="pro-box">
                <div class="pro-boxing">
                  <div class="date">
                    {{ product.date | formatDate('yyyy-MM-dd hh:mm:ss') }}
                  </div>
                  <div class="clearfix">
                    <div class="fl pro-count">
                      共计{{ product.count }}件商品
                    </div>
                    <div class="fr pro-total">合计{{ product.total }}</div>
                  </div>
                </div>
                <div class="left-box left"></div>
                <div class="left-box right"></div>
              </div>
              <div class="again-purchase">
                <van-button
                  type="default"
                  @click="sure"
                  v-if="product.status == 1 ? true : false"
                  >确定收货</van-button
                >
                <van-button
                  type="default"
                  @click="dele"
                  v-if="product.status == 1 ? false : true"
                  >删除订单</van-button
                >
                <van-button type="default" @click="againshop"
                  >再来一单</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { getToken } from '@/utils/storage'
import { affirmorderAPI, addShopcartAPI } from '@/api/user'
import '../assets/less/orderdetails.less'
export default {
  data () {
    return {
      product: [],
      sums: 0,
      show: true,
      sidarr: []
    }
  },
  created () {
    const tokenString = getToken()
    if (!tokenString) return this.$router.push({ name: 'Login' })
    this.product = []
    if (!this.$route.query.item.oid) {
      return this.$router.push({ name: 'Dingdan' })
    }
    this.product = this.$route.query.item
  },
  methods: {
    back () {
      this.$router.push({ name: 'Dingdan' })
    },
    // 确认收货
    sure () {
      const url = '/receive'
      Dialog.confirm({
        title: '确定收货',
        message: '确定将已收到商品'
      }).then(() => {
        this.surefn(this.product.oid, url)
        this.product.status = 2
      })
    },
    // 删除订单
    dele () {
      const url = '/removeOrder'
      Dialog.confirm({
        title: '确定删除订单',
        message: '此操作不可返回'
      }).then(() => {
        this.surefn(this.product.oid, url)
        this.$router.push({ name: 'Dingdan' })
      })
    },
    // 确定收货/删除订单方法
    surefn (value, url) {
      console.log(value, url)
      const tokenString = getToken()
      affirmorderAPI(url, {
        appkey: this.$store.state.appkey,
        tokenString,
        oid: value
      })
        .then(res => {
          console.log(res)
          this.$toast(res.msg)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 再来一单
    againshop () {
      const tokenString = getToken()
      // 将订单中的每个商品先加购获取sid
      this.product.products.forEach(item => {
        const data = {
          appkey: this.$store.state.appkey,
          pid: item.pid,
          tokenString,
          count: item.count,
          rule: item.rule
        }
        addShopcartAPI(data)
      })
      this.$router.push({ name: 'Shop' })
    },
    // 跳转到商品详情
    go (item) {
      this.$router.push({ name: 'Detail', query: { pid: item.pid } })
    }
  }
}
</script>

<style lang="less" scoped></style>
